<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>定时事件</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>

<body>
    <h1>定时事件</h1>

    {% if events %}
    <div class="expenses-grid">
        {% for event in events %}
        <div class="expense-card">
            <div>
                <span class="expense-date">间隔：每{{ event.interval_days }}天</span>
                <span class=" del-mini-div">
                    <a href="{{ url_for('scheduled_events.edit_scheduled_event', event_id=event.id) }}" class="del-mini-btn" style="margin-right: 5px;">
                        编辑
                    </a>
                    <form method="POST"
                        action="{{ url_for('scheduled_events.toggle_scheduled_event', event_id=event.id) }}"
                        style="display: inline">
                        <button type="submit" class="del-mini-btn">
                            {{ "禁用" if event.enabled else "启用" }}
                        </button>
                    </form>
                    <form method="POST"
                        action="{{ url_for('scheduled_events.delete_scheduled_event', event_id=event.id) }}"
                        style="display: inline" onsubmit="return confirm('确定要删除这个定时事件吗？')">
                        <button type="submit" class="del-mini-btn">
                            删除
                        </button>
                    </form>
                </span>
            </div>
            <div class="expense-description">时间：{{ event.execution_time }}</div>
            <div class="expense-description">类型：{{ "收入" if event.event_type == "income" else "支出" }}</div>
            <div class="expense-description">跳过周末：{{ "是" if event.skip_weekends else "否" }}</div>
            <div class="expense-description">状态：{{ "启用" if event.enabled else "禁用" }}</div>
            <div class="expense-description">描述：{{ event.description }}</div>
            <div class="expense-amount {{ 'income' if event.event_type == 'income' else 'expense' }}">{{ "￥" }}{{ event.amount }}</div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p>没有找到定时事件。</p>
    {% endif %}

    <div style="text-align: center; margin-top: 20px;">
        <a href="{{ url_for('scheduled_events.add_scheduled_event') }}" class="btn">添加定时事件</a>
    </div>

    <!-- 导航按钮 -->
    <div class="floating-btn">
        <button onclick="toggleMenu()" aria-label="菜单按钮">☰</button>
        <ul class="menu" id="navMenu">
            <li><a href="/expenses" class="btn">查看支出</a></li>
            <li><a href="/budget" class="btn">查看预算</a></li>
            <li><a href="/fixed_expenses" class="btn">管理固定支出</a></li>
            <li><a href="/scheduled_events" class="btn">定时事件</a></li>
            <li>
                <a href="/reset-db" onclick="return confirm('确定要重置数据库吗？这将删除所有数据并重新创建表')" class="btn"
                    style="background-color: #f44336">重置数据库</a>
            </li>
        </ul>
    </div>

    <script>
        // 菜单切换函数
        function toggleMenu() {
            let menu = document.getElementById("navMenu");
            if (!menu) return;

            let changeOpen = menu.style.display != "block";

            const items = menu.querySelectorAll("li");
            items.forEach((item, index) => {
                item.style.animationDelay = changeOpen ? `${index * 0.1}s` : "0s";
            });

            menu.style.display = changeOpen ? "block" : "none";
        }

        // 点击其他地方隐藏菜单
        window.onclick = function (event) {
            const menu = document.getElementById("navMenu");
            const button = event.target.closest("button[aria-label='菜单按钮']");
            if (menu && menu.style.display === "block" && !button) {
                menu.style.display = "none";
            }
        };
    </script>
</body>

</html>